<template>
	<view class="index-container">
		<view class="index-query-box">
			<u-form :model="form" :border-bottom="false" label-position="left" label-align="center" :label-width="178"
			 :label-style="labelStyle" ref="uForm">
				<u-form-item label="一级销区" class="my-form-item">
					<u-input class="my-input" :height="98" v-model="form.rp02name" type="select" placeholder="请选择" :select-open="show"
					 @click="showFn()" />
					<u-picker mode="selector" v-model="show" @confirm="actionSheetCallback" :range="actionSheetList" range-key="rp02name"></u-picker>
				</u-form-item>
				<u-form-item label="二级销区" class="my-form-item">
					<u-input class="my-input" :height="98" v-model="form.rp03name" type="select" placeholder="请选择" :select-open="show2"
					 @click="show2Fn()" />
					<u-picker mode="selector" v-model="show2" @confirm="actionSheetCallback2" :range="actionSheetList2" range-key="rp03name"></u-picker>
				</u-form-item>
				<u-form-item label="品牌" class="my-form-item">
					<u-input class="my-input" :height="98" v-model="form.brand" type="select" placeholder="请选择" :select-open="show3"
					 @click="show3Fn()" />
					<u-picker mode="selector" v-model="show3" @confirm="actionSheetCallback3" :range="actionSheetList3" range-key="brand"></u-picker>
				</u-form-item>
				<u-form-item label="门店" class="my-form-item">
					<u-input class="my-input" :height="98" v-model="form.storeName" type="select" placeholder="请选择" :select-open="show4"
					 @click="show4Fn()" />
					<u-picker mode="selector" v-model="show4" @confirm="actionSheetCallback4" :range="actionSheetList4" range-key="storeName"></u-picker>
				</u-form-item>
			</u-form>
		</view>

		<view class="index-video-count">共有{{videosAmount || 0}}条记录</view>

		<view class="index-video-list">
			<view class="index-video-box">
				<view v-if="dataList.length == 0" class="default-no-data">暂无数据</view>
				<view v-if="dataList.length > 0" style="width: 100%;height: 100%;">
					<view class="index-video-list-item" v-for="(item, index) in dataList" :key="index" @tap.stop="toDetailPage(item)">
						<view class="img">
							<image :src="item.firstPictureUrl" mode="widthFix"></image>
							<view class="index-video-play-btn">
								<image src="../../static/btn-play.png"></image>
							</view>
						</view>
						<view class="info">
							<view class="title">{{item.storeName || ''}}</view>
							<view class="detail">
								<u-image class="img" width="60rpx" height="60rpx" :src="item.avatar || ''" shape="circle"></u-image>
								<view class="name">{{(item.name || '')}}</view>
								<view class="date">{{(item.createTime?(item.createTime.substring(0,10)):'') + ' · ' + (item.rp03name || '')}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="dataList.length > 0" class="index-btn-upload-bg"></view>
				<!-- <view class="index-btn-upload" @click="toUploadPage()">上传视频</view> -->
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="showModel" :content="modelContent" :show-confirm-button="false"></u-modal>
	</view>
</template>

<script>
	import {
		getRp02nameList,
		getRp03nameList,
		getBrandList,
		getStoreList,
		getXDInfoList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				labelStyle: {
					'height': '98rpx',
					'background': '#E4EAEE',
					'border-radius': '16rpx',
					'color': '#4F5A61',
					'font-size': '26rpx',
					'font-family': 'PingFangSC-Regular, PingFang SC',
					'font-weight': '400'
				},
				showModel: false,
				modelContent: '数据加载中...',
				show: false,
				show2: false,
				show3: false,
				show4: false,
				form: {
					rp02: '',
					rp02name: '', // 一级销区
					rp03: '',
					rp03name: '', // 二级销区
					brandCode: '',
					brand: '', // 品牌
					storeName: '', // 门店
					storeAddress: ''
				},
				actionSheetList: [],
				actionSheetList2: [],
				actionSheetList3: [],
				actionSheetList4: [],
				videosAmount: 0,
				currentPage: 1,
				canGetMoreData: true,
				dataList: []
			};
		},
		onLoad: function(option) {
			const that = this;
			that.LOGINACTION(function() {
				that.getXDList();
			});
		},
		onShow: function() {
			// app每次显示的时候，都要查询列表数据
			console.log('巡店列表页-this.CONFIG:');
			console.log(this.CONFIG);
		},
		methods: {
			getCode() {
				return this.CONFIG.user.id
				
				// let code = this.CONFIG.user.id;
				// 数组中这些工号可以查看全部巡店记录，剩下的人只能查看自己上传的
				// const leaderCodes = ['HN030637', 'HN002782' , 'HN010941', 'HN017799', 'HN000619', 'HN031918', 'HN008051'];
				// const leaderCodes = ['HN002782' , 'HN010941', 'HN017799', 'HN000619', 'HN031918', 'HN008051'];
				// if (leaderCodes.indexOf(code) !== -1) {
				// 	code = '';
				// }
				// return code;
			},
			getXDList(more) {
				const that = this;
				if (more) {
					that.currentPage = that.currentPage + 1;
				}
				const params = {
					code: that.getCode(),
					rp02name: that.form.rp02name == '全部' ? '' : that.form.rp02name,
					rp03name: that.form.rp03name == '全部' ? '' : that.form.rp03name,
					brand: that.form.brand == '全部' ? '' : that.form.brand,
					storeName: that.form.storeName == '全部' ? '' : that.form.storeName,
					pageNum: that.currentPage,
					pageSize: 5
				};
				that.showModel = true;
				getXDInfoList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('巡店列表结果:');
						console.log(rs);
						that.showModel = false;
						if (rs.code == 200) {
							const list = rs.rows || [];
							if (list.length < 5) {
								that.canGetMoreData = false;
							}
							if (more) {
								that.dataList = that.dataList.concat(list);
							} else {
								that.videosAmount = rs.total; // 记录总条数
								that.dataList = list;
							}
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取巡店列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取巡店列表失败:');
					console.log(e);
				});
			},
			getMoreData: function() {
				console.log('进入加载更多的函数...是否可加载更多数据:');
				console.log(this.canGetMoreData);
				if (this.canGetMoreData == false) {
					return;
				}
				this.getXDList(true);
			},
			// 点击actionSheet回调
			showFn: function() {
				const that = this;
				if (that.actionSheetList.length > 0) {
					that.show = true;
				} else {
					that.actionSheetList = [{
						rp02: '',
						rp02name: '全部',
						text: '全部'
					}];
					const params = {
						code: that.getCode()
					};
					getRp02nameList(params, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('一级销区列表结果:');
							console.log(rs);
							if (rs.code == 200) {
								const list = rs.data || [];
								if (list.length > 0) {
									list.forEach(function(item) {
										item.text = item.rp02name || '';
									})
								}
								console.log('actionSheetList:');
								that.actionSheetList = that.actionSheetList.concat(list);
								console.log(that.actionSheetList);
								that.show = true;
							} else {
								that.$refs.uToast.show({
									title: rs.msg || '获取一级销区列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}, function(e) {
						console.log('获取一级销区列表失败:');
						console.log(e);
					});
				}
			},
			// 点击一级销区回调，查询可选的二级销区
			actionSheetCallback(e) {
				const index = e[0];
				const that = this;
				that.form.rp02 = that.actionSheetList[index].rp02;
				that.form.rp02name = that.actionSheetList[index].rp02name;
				this.form.rp03 = '';
				this.form.rp03name = '';
				this.form.brand = '';
				this.form.brandCode = '';
				this.form.storeName = '';
				this.form.storeAddress = '';
				this.currentPage = 1;
				// 查询列表
				this.getXDList();
			},
			show2Fn: function() {
				const that = this;
				that.actionSheetList2 = [{
					rp03: '',
					rp03name: '全部',
					text: '全部'
				}];
				if (that.form.rp02 === '') {
					that.show2 = true;
				} else {
					const params = {
						rp02: that.form.rp02
					};
					getRp03nameList(params, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('二级销区列表结果:');
							console.log(rs);
							if (rs.code == 200) {
								const list = rs.RP03 || [];
								if (list.length > 0) {
									list.forEach(function(item) {
										item.text = item.rp03name;
									})
								}
								that.actionSheetList2 = that.actionSheetList2.concat(list);
								that.show2 = true;
							} else {
								if (rs.msg) {
									that.$refs.uToast.show({
										title: rs.msg || '获取二级销区列表失败',
										type: 'error',
										duration: 3000,
										callback: function() {
											return;
										}
									});
								}
							}
						}
					}, function(e) {
						console.log('获取二级销区列表失败:');
						console.log(e);
						that.$refs.uToast.show({
							title: '获取二级销区列表失败',
							type: 'error',
							duration: 3000,
							callback: function() {
								return;
							}
						});
					});
				}
			},
			actionSheetCallback2(e) {
				const index = e[0];
				this.form.rp03 = this.actionSheetList2[index].rp03;
				this.form.rp03name = this.actionSheetList2[index].rp03name;
				this.form.brand = '';
				this.form.brandCode = '';
				this.form.storeName = '';
				this.form.storeAddress = '';
				this.currentPage = 1;
				// 查询列表
				this.getXDList();
			},
			show3Fn: function() {
				const that = this;
				that.actionSheetList3 = [{
					brandCode: '',
					brand: '全部',
					text: '全部'
				}];
				const params = {
					rp02: that.form.rp02,
					rp03: that.form.rp03
				};
				getBrandList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('品牌列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							const list = rs.brand || [];
							if (list.length > 0) {
								list.forEach(function(item) {
									item.text = item.brand;
								})
							}
							that.actionSheetList3 = that.actionSheetList3.concat(list);
							console.log(that.actionSheetList3);
							that.show3 = true;
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取品牌列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取品牌列表失败:');
					console.log(e);
				});
			},
			actionSheetCallback3(e) {
				const index = e[0];
				this.form.brandCode = this.actionSheetList3[index].brandCode;
				this.form.brand = this.actionSheetList3[index].brand;
				this.form.storeName = '';
				this.form.storeAddress = '';
				this.currentPage = 1;
				// 查询列表
				this.getXDList();
			},
			show4Fn: function() {
				const that = this;
				that.actionSheetList4 = [{
					storeName: '全部',
					text: '全部'
				}];
				const params = {
					code: that.getCode(),
					rp02name: that.form.rp02name == '全部' ? '' : that.form.rp02name,
					rp03name: that.form.rp03name == '全部' ? '' : that.form.rp03name,
					brand: that.form.brand == '全部' ? '' : that.form.brand
					// storeName: that.form.storeName == '全部' ? '' : that.form.storeName,
					// pageNum: 1, // that.currentPage
					// pageSize: 10
				};
				getStoreList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('门店列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							const list = rs.data || [];
							if (list.length > 0) {
								list.forEach(function(item) {
									item.text = item.storeName;
								})
							}
							that.actionSheetList4 = that.actionSheetList4.concat(list);
							console.log('list:');
							console.log(list);
							that.show4 = true;
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取门店列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取门店列表失败:');
					console.log(e);
				});
			},
			actionSheetCallback4(e) {
				const index = e[0];
				this.form.storeName = this.actionSheetList4[index].text;
				this.currentPage = 1;
				// 查询列表
				this.getXDList();
			},
			toDetailPage(item) {
				console.log('toDetailPage:');
				console.log(item);
				uni.setStorage({
					key: 'XDItem',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '../detail/index'
						});
					}
				});
			},
			clearStorageOldData(call) {
				this.removeStoreItem();
				this.removeMyVideoList();
				this.removeMyImageList();
				setTimeout(function() {
					if (call) {
						call();
					}
				}, 40)
			},
			removeStoreItem() {
				uni.getStorage({
					key: 'storeItem',
					success: function(res) {
						uni.removeStorage({
							key: 'storeItem',
							success: function(rs) {}
						});
					},
					fail: function(e) {
						console.log(e);
					}
				});
			},
			removeMyVideoList() {
				uni.getStorage({
					key: 'myVideoList',
					success: function(res) {
						uni.removeStorage({
							key: 'myVideoList',
							success: function(rs) {}
						});
					},
					fail: function(e) {
						console.log(e);
					}
				});
			},
			removeMyImageList() {
				uni.getStorage({
					key: 'myImageList',
					success: function(res) {
						uni.removeStorage({
							key: 'myImageList',
							success: function(rs) {}
						});
					},
					fail: function(e) {
						console.log(e);
					}
				});
			},
			toUploadPage() {
				this.clearStorageOldData(function() {
					uni.navigateTo({
						url: '../upload/index'
					});
				});
			}
		},
		onReachBottom() { // 与methods 同级
			console.log('页面到底了');
			this.getMoreData();
		}
	};
</script>

<style>
	page,
	.index-container {
		width: 100%;
		background: #F3F5F7;
	}

	.index-query-box {
		width: 100%;
		padding: 20rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 30rpx 30rpx;
	}

	.my-form-item {
		padding-top: 0;
	}

	.my-input {
		height: 98rpx;
		padding-left: 30rpx !important;
		padding-right: 20rpx !important;
		background: #F7F7F7;
		border-radius: 16rpx;
	}

	.index-video-count {
		width: 100%;
		padding: 30rpx 41rpx 10rpx 41rpx;
		text-align: left;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(79, 90, 97, 0.7);
	}

	.index-video-list {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
	}

	.index-video-box {
		width: 100%;
		height: 100%;
	}

	.default-no-data {
		width: 100%;
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: grey;
	}

	.index-video-list-item {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.index-video-list-item .img {
		position: relative;
		display: block;
		min-height: 0;
		border: 0;
		line-height: 0;
		overflow: hidden;
		border-radius: 16rpx 16rpx 0 0;
	}

	.index-video-list-item .img>image {
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.index-video-play-btn {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);
		position: absolute;
		top: 0;
		left: 0;
	}

	.index-video-play-btn image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -40rpx;
		margin-left: -40rpx;
		z-index: 10;
	}

	.index-video-list-item .info {
		width: 100%;
		height: 159rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 16rpx 16rpx;
	}

	.index-video-list-item .info .title {
		width: calc(100% - 60rpx);
		height: 69rpx;
		line-height: 69rpx;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #262628;
		background-color: #FFFFFF;
		letter-spacing: 1rpx;
		margin-left: 30rpx;
	}

	.index-video-list-item .info .detail {
		width: calc(100% - 50rpx);
		height: 64rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.index-video-list-item .info .detail .img {
		display: inline-block;
	}

	.index-video-list-item .info .detail .name {
		display: inline-block;
		padding-left: 15rpx;
		padding-right: 15rpx;
		flex: 1;
		height: 64rpx;
		line-height: 64rpx;
		text-align: left;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.index-video-list-item .info .detail .date {
		display: inline-block;
		text-align: right;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.index-btn-upload-bg {
		width: 100%;
		height: 103rpx;
	}

	.index-btn-upload {
		width: 626rpx;
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		background-image: url(../../static/btn.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		position: fixed;
		left: 62rpx;
		bottom: 0;
		z-index: 30;
	}

	.my-action-sheet .u-drawer-content {
		height: 100% !important;
	}
</style>
